<template>
    <div class="views-tongji2">
        <div></div>
        <div>
            <v3-echarts :options="barOptions" width="100%" height="300px"></v3-echarts>
        </div>
    </div>
</template>

<script setup>
    import http from "@/utils/ajax/http";
    import DB from "@/utils/db";

    import { ref, reactive, computed, unref } from "vue";
    import { useRoute } from "vue-router";
    import { session } from "@/utils/utils";

    const route = useRoute();
    const dianyingpingjiaList = ref([]);
    const loadDatabaseList = async () => {
        var where = " 1=1 ";

        dianyingpingjiaList.value = await DB.name("dianyingpingjia")
            .alias("pj")
            .field("pj.dianyingmingcheng")
            .group("pj.dianyingmingcheng")
            .field("avg(pj.pingfen) avg_pingfen")
            .order("avg_pingfen DESC")
            .where(where)
            .select();
    };

    loadDatabaseList();
    const barOptions = computed(() => {
        var list = unref(dianyingpingjiaList);
        return {
            title: {
                text: "",
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                },
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: [
                {
                    type: "category",
                    data: list.map((s) => s.dianyingmingcheng),
                    axisTick: {
                        alignWithLabel: true,
                    },
                },
            ],
            yAxis: [
                {
                    type: "value",
                },
            ],
            series: [
                {
                    name: "评分",
                    type: "bar",
                    barWidth: "60%",
                    data: list.map((s) => parseFloat(s.avg_pingfen)),
                },
            ],
        };
    });
</script>

<style scoped lang="scss">
    .views-tongji2 {
    }
</style>
